<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'commodity.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- Google Fonts Includes -->
<script type="application/x-javascript">addEventListener("load", function() {
		setTimeout(hideURLbar, 0);
	}, false);
	function hideURLbar() {
		window.scrollTo(0, 1);
	}
</script>
<!--flexslider-css-->
<!--bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--coustom css-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--fonts-->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600,600italic'
	rel='stylesheet' type='text/css'>
<!--/fonts-->
<!--script-->
<script src="js/jquery.min.js"> </script>
<!-- js -->
<script src="js/bootstrap.js"></script>
<!-- js -->
<!-- js -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event) {
			event.preventDefault();
			$('html,body').animate({
				scrollTop : $(this.hash).offset().top
			}, 900);
		});
	});
</script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<!--/script-->

<script type="text/javascript">
	var fileupload_error = "${param.fileupload_error}"
	if (fileupload_error != "") {
		alert("文件上传失败：文件大小不能超过12M,没有上传图片");
	}
	function changepic() {
		// 构造一个文件渲染对象
		var reads = new FileReader();
		// 得到文件列表数组
		var f = document.getElementById('photo').files[0];
		// FileReader.readAsDataURL读取指定Blob或File的内容
		reads.readAsDataURL(f);
		// 拿到文件数据
		reads.onload = function(e) {
			// 显示图片
			document.getElementById('img3').src = this.result;
			$("#img3").css("display", "block");

		};
	}
</script>
 

 <script type="text/javascript">
	function shanchu() {
		alert("确认删除");
	}
</script> 
</head>

<body>
	<%@ include file="top.jsp"%>
	<div class="banner-forms">
		 <form action="AddCommodityServlet" method="post"
			enctype="multipart/form-data"> 

			<input class="name" type="text" name="Sceneryname" id="Sceneryname"
				placeholder="美食名称"> <input class="nuber" type="text"
				name="TicketPrice" id="TicketPrice" placeholder="价格"> <input
				class="nuber" type="text" name="Ticketinventory"
				id="Ticketinventory" placeholder="数量"> <input type="file"
				id="photo" name="photo" class="filepath" onchange="changepic()"
				accept="image/jpg,image/jpeg,image/png,image/gif">
			<textarea placeholder="美食介绍" name="Sceneryintroduce"
				id="Sceneryintroduce"></textarea>
			
			<input type="submit" class="btn btn-info mrgn-can" value="添加商品" />
		</form>
		
	</div>
	</br>
	</br>
	</br>
	</br>
	</br>
	</br>
	<div id="dyn">
		<div>
			<center>
				<table  width="1000;" height="300" align="center">
					<tr>
						<th>美食编号</th>
						<th>美食名称</th>
						<th>价格/元</th>
						<th>数量/份</th>
						<th>美食照片</th>
						<th>美食介绍</th>
						<th>操作</th>
					</tr>

					<c:forEach items="${list}" var="u">

						<tr id="trd">
							<td><input type="text" value="${u.commodityId}" name="id"
								id="id${u.commodityId}" style="border: none;" /></td>
							<td><input type="text" value="${u.commodityName}"
								name="name" id="name${u.commodityId}" style="border: none;" /></td>
							<td><input type="text" value="${u.unitPrice }"
								id="price${u.commodityId}" name="price" style="border: none;" /></td>

							<td><input type="text" value="${u.commodityStock }"
								id="kucun${u.commodityId}" name="kucun" style="border: none;" /></td>
							<td><img src="ImgshowSceneryServlet?fileName=${u.commodityPicture}" id="img3"
								style="width: 110px; height: 100px;" /></td>


							<td><textarea rows="5" cols="5" name="introduce"
									id="introduce${u.commodityId}" style="border: none;">${u.productInformation }</textarea>
							</td>




							<td><p>
									<a
										href="DeleteCommodityServlet?commodityId=${u.commodityId}&page=${page}"   onclick="shanchu()">删除</a>
								</p>
								<p>
									<a onclick="xg(${u.commodityId})">修改</a>
								</p></td>
							<script type="text/javascript">
								function xg(idxg) {
									var id = $("#id" + idxg).val();
									var name = $("#name" + idxg).val();
									var price = $("#price" + idxg).val();
									var kucun = $("#kucun" + idxg).val();
									var introduce = $("#introduce" + idxg).val();
									$.ajax({
										url : "UpdateCommodityServlet",
										type : "get",
										data : {
											id : id,
											name : name,
											price : price,
											kucun : kucun,
											introduce : introduce
										},
										success : function(data) {
											if (data = 1) {
												alert("修改成功");
											} else {
												alert("修改失败");
											}
							
										},
										error : function(data) {
											alert("修改失败");
										}
									});
								}
							</script>
						</tr>

					</c:forEach>

				</table>

			</center>


		</div>
		<div>
			<center>

				<div style="width: 600px ; height: 50px; margin: 0 auto ;">
					<div style=" margin-left: 130px">
						<input type="button" onclick="shou()" value="首页">  <input
							type="button" onclick="shang(${page })" value="上一页"> <input
							type="button" onclick="xia(${page })" value="下一页"> <input
							type="button" onclick="wei()" value="尾页"> <span>当前页数[${page }]&nbsp;&nbsp;总页数[${pageCount}]</span>
					</div>
				</div>
			</center>
		</div>
		<script type="text/javascript">
var i=${page};
//尾页直接给一个最大值首页直接给1传入
var j=99;
var k=1;
/* alert(i); */
function shou() {
		$.post("SelectCommodityServlet?op=select2",{page:k+"/sy"},function(obj){		
			$("#dyn").html(obj);
	}) 
}
function wei() {
		$.post("SelectCommodityServlet?op=select2",{page:j+"/wy"},function(obj){		
			$("#dyn").html(obj);
	}) 
}
function shang(i) {	
	//方法必须传值,也就是当前index
	$.post("SelectCommodityServlet?op=select2",{page:i+"/s"},function(obj){		
		$("#dyn").html(obj);//传本页数字加字母到weiyeServlet判断
}) 
}
function xia(i) {
	//方法必须传值,也就是当前index
	 $.post("SelectCommodityServlet?op=select2",{page:i+"/x"},function(obj){		
		$("#dyn").html(obj);
})  
}
</script>
		</br> </br> </br>
		<%@ include file="buttom.jsp"%>
</body>
</html>
